import { Pie } from '@ant-design/charts';
import { GridContent, PageContainer, ProCard } from '@ant-design/pro-components';
import { Card, DatePicker, Empty, Radio, Skeleton, Spin } from 'antd';
import moment from 'moment';
import React, { useEffect, useState } from 'react';
import RcResizeObserver from 'rc-resize-observer';
import { cuesPie } from '@/services/api/api-analysis';
const RankPie: React.FC = ({ }) => {
    const [loading, setLoading] = useState(false);
    const [skeletonLoadding, setSkeletonState] =
        useState<boolean>(true);
    const [responsive, setResponsive] = useState(false);
    const options = [
        {
            value: 6000000000200000,
            label: '中央媒体',
        },
        {
            value: 6000000000300000,
            label: '市属媒体',
        },

    ]
    const [dataTabSelect, setDataTabSelectState] = useState<number>(options[0].value);
    const [topicPieData, setTopicPieData] = useState([]);

    /**
     * 宣传刊播
     * @param key
     */
    const loadtopicPieData = async (day: number) => {
        try {
            const response = await cuesPie({ organizationTopId: day });
            if (response.code === 0) {
                console.log(response?.data);
                setTopicPieData(response?.data);
            }
            setLoading(false)
            setSkeletonState(false)
        } catch (error) { }
    };
    useEffect(() => {
        setLoading(true)
        loadtopicPieData(dataTabSelect);
    }, []);
    return (

        <Skeleton avatar title={false} loading={skeletonLoadding} active>
            <Spin spinning={loading}>
                <RcResizeObserver
                    key="resize-observer"
                    onResize={(offset) => {
                        setResponsive(offset.width < 596);
                    }}
                >
                    <ProCard
                        title="报送线索"
                        bordered
                        extra={<><Radio.Group options={options} value={dataTabSelect} onChange={(e) => {
                            setLoading(true)
                            setDataTabSelectState(e.target.value)
                            loadtopicPieData(e.target.value)
                        }} optionType="button" /></>}
                        split="horizontal"
                        bodyStyle={{
                            margin: 0,
                            padding: 30,
                        }}
                        headerBordered
                    >
                        {Array.isArray(topicPieData) && topicPieData.length > 0 ? < Pie
                            style={{
                                height: '50vh',
                            }}
                            {...{
                                appendPadding: 10,
                                data: topicPieData,
                                angleField: 'count',
                                colorField: 'organizationName',
                                radius: 1,
                                // innerRadius: 0.64,
                                // label: {
                                //     type: 'spider',
                                //     offset: '-50%',
                                //     style: {
                                //         textAlign: 'center',
                                //     },
                                //     autoRotate: false,
                                //     content: '{value}',
                                // },
                                label: {
                                    type: responsive ? 'inner' : 'spider',
                                    labelHeight: 28,
                                    content: '{name}\n{percentage}',
                                },
                                interactions: [
                                    {
                                        type: 'element-selected',
                                    },
                                    {
                                        type: 'element-active',
                                    },
                                ],
                                legend: {
                                    position: 'bottom',

                                }
                                // statistic: {
                                //     title: false,
                                //     content: {
                                //         style: {
                                //             whiteSpace: 'pre-wrap',
                                //             overflow: 'hidden',
                                //             textOverflow: 'ellipsis',
                                //         },
                                //         content: '',
                                //     },
                                // },
                            }}
                        /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                    </ProCard >
                </RcResizeObserver >
            </Spin>
        </Skeleton>
    )
};
export default RankPie;
